@use "custom-properties";

@mixin dark-theme {
  --body-background-color: var(--a-dark-grey);

  /* Borders */
  --border-color: var(--a-darker-grey);
  --border-inset-color: var(--a-grey);

  /* Buttons */
  --button-bg-color: var(--color-blue_dark);
  --button-border-color: var(--color-blue_medium);
  --button-box-shadow: 0 1px 1px -1px hsl(0deg, 0%, 10%);
  --button-focus-border-color: var(--color-orange_dark);
  --button-focus-box-shadow: 0 1px 1px 0 var(--button-focus-border-color);
  --button-hover-bg-color: var(--color-blue_medium);
  --button-hover-border-color: var(--color-blue_medium);
  --button-text-color: var(--color-white);
  --button-text-shadow: none;
  --button-disabled-bg-color: var(--a-dark-grey);
  --button-disabled-border-color: var(--a-grey);
  --button-secondary-bg-color: var(--a-darker-grey);
  --button-secondary-border-color: var(--a-grey);
  --button-secondary-hover-bg-color: var(--a-dark-grey);
  --button-secondary-hover-border-color: var(--a-grey);
  --button-secondary-text-color: var(--color-white);

  --code-background-color: var(--a-darkest-grey);
  --code-border-color: var(--a-grey);

  /* Datepicker */
  --datepicker-bg-color: var(--a-dark-grey);
  --datepicker-border-color: var(--a-grey);
  --datepicker-box-shadow: var(--select-dropdown-box-shadow);
  --datepicker-text-color: var(--text-color);
  --datepicker-weekday-text-color: var(--a-lighter-grey);
  --datepicker-text-hover-color: var(--color-orange_medium);
  --datepicker-day-hover-bg: var(--a-grey);
  --datepicker-today-border-color: var(--a-light-grey);
  --datepicker-today-hover-bg-color: var(--a-light-grey);
  --datepicker-today-hover-text-color: var(--color-white);
  --datepicker-selected-bg-color: var(--color-blue_medium);
  --datepicker-selected-text-color: var(--color-white);

  /* Dialogs */
  --dialog-header-color: var(--color-blue_dark);
  --dialog-header-text-color: var(--color-white);
  --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
    hsla(0deg, 0%, 0%, 0.5);
  --dialog-overlay-color: hsla(0deg, 0%, 10%, 0.8);
  --dialog-background-color: var(--a-dark-grey);

  /* Elements */
  --element-editor-background-color: var(--a-dark-grey);
  --element-editor-border-color: var(--a-darkest-grey);
  --element-editor-dragged-background-color: var(--color-blue_medium);
  --element-editor-dragged-border-color: var(--color-orange_dark);
  --element-editor-hover-box-shadow-color: var(--a-darkest-grey);
  --element-header-bg-color: transparent;
  --element-header-active-bg-color: var(--color-blue_medium);
  --element-header-active-color: var(--color-white);
  --element-header-deprecated-bg-color: hsla(29deg, 95%, 20%, 0.25);
  --element-deprecated-border-color: hsl(29deg, 95%, 30%);
  --element-toolbar-background-color: var(--a-dark-grey);
  --element-toolbar-border-color: var(--a-darker-grey);
  --element-dirty-border-color: hsl(55deg, 67%, 45%);
  --element-dirty-header-color: hsl(55deg, 45%, 15%);

  --elements-window-handle-dragged-background-color: var(--color-orange_dark);

  --droppable-elements-background-color: var(--color-blue_dark);

  --nestable-elements-background-color: var(--a-dark-grey);
  --nestable-elements-box-shadow-color: var(--a-darkest-grey);

  /* Focus Status */
  --focus-color: var(--color-orange_dark);

  /* Form Fields */
  --form-field-addon-background-color: var(--a-darker-grey);
  --form-field-background-color: var(--a-darkest-grey);
  --form-field-border-color: var(--border-inset-color);
  --form-field-box-shadow: inset 0 0 1px var(--a-dark-grey);
  --form-field-label-color: var(--text-color-muted);
  --form-field-text-color: var(--text-color);
  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
  --form-field-disabled-bg-color: hsla(0deg, 0%, 20%, 0.5);
  --form-field-error-bg-color: hsl(0deg, 47%, 10%);
  --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 30%, 0.5);

  /* Header */
  --header-background: var(--a-darkest-grey);

  /* Hints */
  --hint-background-color: hsl(55deg, 20%, 25%);
  --hint-border-color: hsla(55deg, 20%, 50%, 0.5);
  --hint-text-color: hsl(55deg, 20%, 75%);
  --hint-text-link-color: hsla(0deg, 0%, 100%, 0.85);

  /* Icon Buttons */
  --icon-button-linked-color: hsla(42deg, 100%, 40%, 0.75);
  --icon-button-linked-hover-color: hsla(42deg, 100%, 50%, 0.75);
  --icon-button-linked-border-color: hsl(42deg, 100%, 50%);
  --icon-button-linked-hover-border-color: hsl(42deg, 100%, 60%);
  --icon-button-hover-bg-color: var(--a-darkest-grey);

  /* Icons */
  --icon-color: var(--a-lighter-grey);

  --image-overlay-box-shadow: -4px 0 4px 0px hsla(0deg, 0%, 0%, 0.5);
  --image-overlay-hover-bg-color: var(--a-darker-grey);

  --list-filter-background-color: var(--form-field-background-color);
  --list-filter-focus-background-color: var(--form-field-background-color);

  /* Main Menu */
  --main-menu-bg-color: var(--color-blue_dark);
  --main-menu-active-bg-color: var(--color-orange_dark);
  --main-menu-active-text-color: var(--color-blue_dark);
  --main-menu-text-color: var(--color-white);
  --main-menu-icon-color: var(--color-white);

  /* Notices */
  --notice-success-background-color: hsl(88deg, 47%, 20%);
  --notice-success-border-color: hsl(127deg, 25%, 30%);
  --notice-success-text-color: hsl(127deg, 42%, 65%);

  --notice-info-background-color: hsl(215deg, 63%, 20%);
  --notice-info-border-color: hsl(225deg, 25%, 30%);
  --notice-info-text-color: hsl(225deg, 55%, 80%);

  --notice-warning-background-color: hsl(55deg, 70%, 15%);
  --notice-warning-border-color: hsl(55deg, 25%, 30%);
  --notice-warning-text-color: hsl(55deg, 53%, 80%);

  --notice-error-background-color: hsl(0deg, 45%, 15%);
  --notice-error-border-color: hsl(0deg, 25%, 30%);
  --notice-error-text-color: hsl(0, 50%, 75%);

  /* Pagination */
  --pagination-background-color: var(--a-darker-grey);
  --pagination-border-color: var(--a-dark-grey);
  --pagination-active-bg-color: var(--color-blue_dark);
  --pagination-active-text-color: var(--color-white);
  --pagination-disabled-text-color: var(--a-light-grey);

  /* Panels */
  --panel-background-color: var(--a-darker-grey);
  --panel-border-color: var(--a-grey);

  --picture-thumbnail-background-color: var(--a-dark-grey);
  --picture-thumbnail-toolbar-bg-color: var(--a-darker-grey);
  --picture-tool-background-color: var(--a-darker-grey);
  --picture-tool-hover-background-color: var(--a-darkest-grey);

  --search-field-background-color: var(--a-dark-grey);

  /* Selects */
  --select-background-color: var(--form-field-background-color);
  --select-border-color: var(--form-field-border-color);
  --select-text-color: var(--text-color);
  --select-hover-bg-color: var(--color-blue_dark);
  --select-hover-border-color: var(--form-field-border-color);
  --select-hover-text-color: var(--text-color);
  --select-background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(200deg, 5%, 70%)" viewBox="0 0 24 24"><path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"></path></svg>');
  --select-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>');
  --select-disabled-background-color: var(--a-darker-grey);
  --select-disabled-border-color: var(--a-grey);
  --select-disabled-text-color: var(--a-lighter-grey);
  --select-dropdown-background-color: var(--a-darker-grey);
  --select-dropdown-box-shadow: 0 var(--spacing-2) var(--spacing-2)
    hsla(0deg, 0%, 0%, 0.75);
  --select-dropdown-border-color: var(--a-grey);

  /* Sidebar */
  --sidebar-background-color: var(--a-darker-grey);

  /* Sitemap */
  --sitemap-page-background-color: var(--a-darker-grey);
  --sitemap-page-hover-color: var(--a-grey);
  --sitemap-info-background-color: var(--a-darker-grey);
  --sitemap-highlight-color: var(--a-grey);

  /* Tables */
  --table-border-color: var(--border-color);
  --table-row-even-background-color: var(--a-darker-grey);
  --table-row-odd-background-color: var(--a-darkest-grey);
  --table-row-hover-color: var(--a-grey);

  /* Tags */
  --tag-background-color: var(--a-grey);
  --tag-hover-background-color: var(--a-dark-grey);
  --tag-active-background-color: var(--color-orange_dark);
  --tag-active-text-color: var(--a-grey);
  --tag-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
  --tag-active-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 22.5%)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');

  /* Text */
  --text-color: var(--a-lightest-grey);
  --text-color-muted: var(--a-lighter-grey);
  --text-link-color: var(--color-orange_medium);
  --text-shadow-light: 0 0 var(--spacing-1) hsla(0deg, 0%, 20%, 0.5);

  /* Thumbnails */
  --thumbnail-background:
    linear-gradient(45deg, var(--a-grey) 25%, transparent 25%) 0.5em 0.5em/1em
      1em,
    linear-gradient(-45deg, var(--a-grey) 25%, transparent 25%) -0.5em 0/1em 1em,
    linear-gradient(45deg, transparent 75%, var(--a-grey) 75%) 0 0/1em 1em,
    linear-gradient(-45deg, transparent 75%, var(--a-grey) 75%) 0 0.5em/1em 1em
      var(--a-dark-grey);

  /* Toolbar */
  --toolbar-bg-color: var(--a-darker-grey);
  --toolbar-border-bottom: 1px solid var(--a-darkest-grey);

  /* Tooltips */
  --tooltip-background-color: var(--color-blue_dark);
  --tooltip-box-shadow: 0 0 var(--spacing-1) hsla(0deg, 0%, 0%, 0.5);

  /* Shoelace */
  --tabs_indicator-color: var(--color-orange_dark);
  --tabs_track-color: var(--border-color);
  --sl-input-label-color: var(--text-color);

  /* File Upload */
  --file-upload-failed-text-color: var(--notice-error-text-color);
  --file-upload-text-color: var(--text-color);
  --file-upload_background-color: var(--a-grey);
  --file-upload_single-upload-background-color: var(--a-dark-grey);
  --file-upload_progress-track-color: var(--a-darker-grey);
  --file-upload_progress-indicator-color: var(--color-blue_medium);
  --file-upload_progress-indicator-color-canceled: var(--a-grey);
  --file-upload_progress-indicator-color-failed: var(
    --notice-error-border-color
  );
  --file-upload_progress-indicator-color-invalid: var(
    --notice-warning-border-color
  );
  --file-upload_progress-indicator-color-successful: var(
    --notice-success-border-color
  );
  --file-upload_progress-indicator-color-upload-finished: var(
    --color-blue_medium
  );

  /*
  * Shoelace Theme Tokens
  */

  /* Primary */
  --sl-color-primary-50: var(--color-orange_medium);
  --sl-color-primary-100: var(--color-orange_medium);
  --sl-color-primary-200: var(--color-orange_medium);
  --sl-color-primary-300: var(--color-orange_dark);
  --sl-color-primary-400: var(--color-orange_dark);
  --sl-color-primary-500: var(--color-orange_dark);
  --sl-color-primary-600: var(--color-orange_dark);
  --sl-color-primary-700: var(--color-orange_very_dark);
  --sl-color-primary-800: var(--color-orange_very_dark);
  --sl-color-primary-900: var(--color-orange_very_dark);
  --sl-color-primary-950: var(--color-orange_very_dark);

  /* Neutral */
  --sl-color-neutral-50: var(--a-grey);
  --sl-color-neutral-100: var(--a-grey);
  --sl-color-neutral-200: var(--a-light-grey);
  --sl-color-neutral-300: var(--a-light-grey);
  --sl-color-neutral-400: var(--a-light-grey);
  --sl-color-neutral-500: var(--a-lighter-grey);
  --sl-color-neutral-600: var(--a-lighter-grey);
  --sl-color-neutral-700: var(--a-lighter-grey);
  --sl-color-neutral-800: var(--a-lightest-grey);
  --sl-color-neutral-900: var(--a-lightest-grey);
  --sl-color-neutral-950: var(--a-lightest-grey);

  .select2-container.select2-container-multi
    .select2-search-choice-close:before,
  .select2-container.select2-allowclear .select2-search-choice-close:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>');
  }
}

@mixin light-theme {
  --body-background-color: var(--color-grey_very_light);

  /* Borders */
  --border-color: hsla(0deg, 0%, 69%, 0.5);
  --border-inset-color: hsla(0deg, 0%, 79%, 0.5);

  /* Buttons */
  --button-bg-color: var(--color-white);
  --button-border-color: var(--border-color);
  --button-box-shadow: 0 1px 1px -1px hsl(0deg, 0%, 20%);
  --button-focus-border-color: var(--color-orange_dark);
  --button-focus-box-shadow: 0 1px 1px 0 var(--button-focus-border-color);
  --button-hover-bg-color: var(--color-grey_very_light);
  --button-hover-border-color: hsla(0deg, 0%, 59%, 0.5);
  --button-text-color: var(--text-color);
  --button-text-shadow: none;
  --button-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5);
  --button-disabled-border-color: var(--button-border-color);
  --button-secondary-bg-color: var(--color-grey_light);
  --button-secondary-border-color: var(--border-color);
  --button-secondary-hover-bg-color: var(--color-white);
  --button-secondary-hover-border-color: var(--color-grey_medium);
  --button-secondary-text-color: var(--text-color);

  --code-background-color: var(--color-grey_light);
  --code-border-color: var(--border-color);

  /* Datepicker */
  --datepicker-bg-color: var(--color-white);
  --datepicker-border-color: var(--border-color);
  --datepicker-box-shadow: var(--select-dropdown-box-shadow);
  --datepicker-text-color: var(--text-color);
  --datepicker-weekday-text-color: rgba(0, 0, 0, 0.54);
  --datepicker-text-hover-color: var(--color-orange_dark);
  --datepicker-day-hover-bg: var(--color-grey_light);
  --datepicker-today-border-color: var(--color-grey_dark);
  --datepicker-today-hover-bg-color: var(--color-grey_dark);
  --datepicker-today-hover-text-color: var(--color-white);
  --datepicker-selected-bg-color: var(--color-blue_medium);
  --datepicker-selected-text-color: var(--color-white);

  /* Dialogs */
  --dialog-header-color: var(--color-blue_dark);
  --dialog-header-text-color: var(--color-white);
  --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
    hsla(0deg, 0%, 14%, 0.5);
  --dialog-overlay-color: hsla(0deg, 0%, 39%, 0.4);
  --dialog-background-color: var(--color-grey_very_light);

  /* Elements */
  --element-editor-background-color: var(--color-grey_very_light);
  --element-header-bg-color: transparent;
  --element-header-active-bg-color: var(--color-blue_dark);
  --element-header-active-color: var(--color-white);
  --element-header-deprecated-bg-color: hsla(29deg, 95%, 84%, 0.25);
  --element-deprecated-border-color: hsl(29deg, 95%, 84%);
  --element-toolbar-background-color: var(--color-grey_very_light);
  --element-toolbar-border-color: var(--color-grey_light);
  --element-dirty-border-color: hsl(56deg, 67%, 52%);
  --element-dirty-header-color: hsl(56deg, 100%, 93%);

  /* Focus Status */
  --focus-color: hsla(28deg, 77%, 68%, 0.75);

  /* Form Fields */
  --form-field-addon-background-color: var(--color-grey_light);
  --form-field-background-color: var(--color-white);
  --form-field-border-color: var(--border-color) var(--border-color)
    var(--border-inset-color) var(--border-inset-color);
  --form-field-box-shadow: inset 0 0 1px var(--color-grey_light);
  --form-field-label-color: var(--text-color);
  --form-field-text-color: var(--text-color);
  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
  --form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5);
  --form-field-error-bg-color: hsl(0deg, 47%, 96%);
  --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 69%, 0.5);

  /* Header */
  --header-background: hsl(0deg, 0%, 85%);

  /* Hints */
  --hint-background-color: var(--color-yellow_light);
  --hint-border-color: var(--color-grey_light);
  --hint-text-color: hsl(49deg, 18%, 30%);
  --hint-text-link-color: var(--color-grey_very_dark);

  /* Icon Buttons */
  --icon-button-linked-color: hsla(42deg, 100%, 74%, 0.75);
  --icon-button-linked-hover-color: hsla(42deg, 100%, 64%, 0.75);
  --icon-button-linked-border-color: hsl(42deg, 100%, 64%);
  --icon-button-linked-hover-border-color: hsl(42deg, 100%, 54%);
  --icon-button-hover-bg-color: hsla(0deg, 0%, 69%, 0.5);

  /* Icons */
  --icon-color: hsla(224deg, 23%, 26%, 0.75);

  --image-overlay-box-shadow: -4px 0 4px 0px var(--text-color);
  --image-overlay-hover-bg-color: var(--color-grey_light);

  --list-filter-background-color: hsla(0deg, 0%, 100%, 0.25);
  --list-filter-focus-background-color: var(--color-white);

  /* Main Menu */
  --main-menu-bg-color: var(--color-blue_dark);
  --main-menu-active-bg-color: var(--color-orange_dark);
  --main-menu-active-text-color: var(--color-blue_dark);
  --main-menu-text-color: var(--color-white);
  --main-menu-icon-color: var(--color-white);

  /* Notices */
  --notice-success-background-color: hsl(88deg, 47%, 88%);
  --notice-success-border-color: hsl(127deg, 25%, 69%);
  --notice-success-text-color: hsl(128deg, 32%, 26%);

  --notice-info-background-color: hsl(215deg, 63%, 87%);
  --notice-info-border-color: hsl(222deg, 25%, 61%);
  --notice-info-text-color: hsl(225deg, 53%, 29%);

  --notice-warning-background-color: hsl(56deg, 68%, 85%);
  --notice-warning-border-color: hsl(55deg, 25%, 69%);
  --notice-warning-text-color: hsl(56deg, 53%, 29%);

  --notice-error-background-color: hsl(0deg, 47%, 88%);
  --notice-error-border-color: hsl(0deg, 25%, 69%);
  --notice-error-text-color: hsl(0deg, 51%, 42%);

  /* Pagination */
  --pagination-background-color: var(--color-grey_very_light);
  --pagination-border-color: var(--border-color);
  --pagination-active-bg-color: var(--color-blue_dark);
  --pagination-active-text-color: var(--color-white);
  --pagination-disabled-text-color: #c0c0c0;

  /* Panels */
  --panel-background-color: var(--color-grey_light);
  --panel-border-color: var(--border-color);

  --picture-tool-background-color: var(--color-white);
  --picture-tool-hover-background-color: var(--color-grey_very_light);

  --search-field-background-color: var(--color-grey_very_light);

  /* Selects */
  --select-background-color: var(--form-field-background-color);
  --select-border-color: var(--border-inset-color);
  --select-text-color: var(--form-field-text-color);
  --select-hover-bg-color: var(--color-blue_dark);
  --select-hover-border-color: var(--border-color);
  --select-hover-text-color: var(--color-white);
  --select-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>');
  --select-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>');
  --select-disabled-background-color: var(--color-grey_very_light);
  --select-disabled-border-color: var(--border-inset-color);
  --select-dropdown-background-color: var(--color-white);
  --select-dropdown-box-shadow: 0 var(--spacing-2) var(--spacing-2)
    hsla(0deg, 0%, 0%, 0.15);
  --select-dropdown-border-color: var(--color-grey_very_light);

  /* Sidebar */
  --sidebar-background-color: var(--color-grey_very_light);

  /* Sitemap */
  --sitemap-page-background-color: hsla(0deg, 0%, 100%, 0.75);
  --sitemap-page-hover-color: hsla(60deg, 81%, 92%, 0.5);
  --sitemap-info-background-color: hsla(0deg, 0%, 100%, 0.5);
  --sitemap-highlight-color: hsla(57deg, 100%, 82%, 0.5);

  /* Tables */
  --table-border-color: var(--color-grey_light);
  --table-row-even-background-color: var(--color-white);
  --table-row-odd-background-color: hsla(0deg, 0%, 100%, 0.5);
  --table-row-hover-color: hsla(60deg, 81%, 92%, 0.5);

  /* Tags */
  --tag-background-color: var(--color-grey_light);
  --tag-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
  --tag-hover-background-color: var(--color-grey_medium);
  --tag-active-background-color: var(--color-blue_medium);
  --tag-active-text-color: var(--color-grey_very_light);
  --tag-active-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.95)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');

  /* Text */
  --text-color: hsla(224deg, 23%, 26%, 0.8);
  --text-color-muted: hsla(224deg, 23%, 26%, 0.6);
  --text-link-color: var(--color-orange_very_dark);
  --text-shadow-light: 0 0 var(--spacing-1) hsla(0deg, 0%, 100%, 0.5);

  /* Thumbnails */
  --thumbnail-background:
    linear-gradient(45deg, var(--color-grey_light) 25%, transparent 25%) 0.5em
      0.5em/1em 1em,
    linear-gradient(-45deg, var(--color-grey_light) 25%, transparent 25%) -0.5em
      0/1em 1em,
    linear-gradient(45deg, transparent 75%, var(--color-grey_light) 75%) 0 0/1em
      1em,
    linear-gradient(-45deg, transparent 75%, var(--color-grey_light) 75%) 0
      0.5em/1em 1em var(--color-grey_medium);

  /* Toolbar */
  --toolbar-bg-color: var(--color-grey_light);
  --toolbar-border-bottom: var(--border-default);

  /* Tooltips */
  --tooltip-background-color: var(--color-blue_dark);
  --tooltip-box-shadow: 0 0 var(--spacing-1) var(--color-grey_light);

  /* Shoelace */
  --tabs_indicator-color: var(--color-orange_dark);
  --tabs_track-color: var(--color-grey_light);
  --sl-input-label-color: var(--text-color);

  /* File Upload */
  --file-upload-failed-text-color: var(--color-red_medium);
  --file-upload-text-color: var(--text-color);
  --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
  --file-upload_single-upload-background-color: var(--color-grey_light);
  --file-upload_progress-track-color: var(--color-blue_very_light);
  --file-upload_progress-indicator-color: var(--color-blue_dark);
  --file-upload_progress-indicator-color-canceled: hsla(0deg, 0%, 60%, 0.8);
  --file-upload_progress-indicator-color-failed: var(--color-red_medium);
  --file-upload_progress-indicator-color-invalid: var(--color-red_medium);
  --file-upload_progress-indicator-color-successful: var(--color-green_medium);
  --file-upload_progress-indicator-color-upload-finished: var(
    --color-blue_dark
  );

  /*
  * Shoelace Theme Tokens
  */

  /* Primary */
  --sl-color-primary-50: var(--color-blue_very_light);
  --sl-color-primary-100: var(--color-blue_very_light);
  --sl-color-primary-200: var(--color-blue_light);
  --sl-color-primary-300: var(--color-blue_light);
  --sl-color-primary-400: var(--color-blue_medium);
  --sl-color-primary-500: var(--color-blue_medium);
  --sl-color-primary-600: var(--color-blue_dark);
  --sl-color-primary-700: var(--color-blue_dark);
  --sl-color-primary-800: var(--color-blue_dark);
  --sl-color-primary-900: var(--color-blue_dark);
  --sl-color-primary-950: var(--color-blue_dark);

  /* Neutral */
  --sl-color-neutral-50: var(--color-grey_very_light);
  --sl-color-neutral-100: var(--color-grey_very_light);
  --sl-color-neutral-200: var(--color-grey_light);
  --sl-color-neutral-300: var(--color-grey_light);
  --sl-color-neutral-400: var(--color-grey_medium);
  --sl-color-neutral-500: var(--color-grey_medium);
  --sl-color-neutral-600: var(--color-grey_dark);
  --sl-color-neutral-700: var(--color-grey_dark);
  --sl-color-neutral-800: var(--color-grey_very_dark);
  --sl-color-neutral-900: var(--color-grey_very_dark);
  --sl-color-neutral-950: var(--color-grey_very_dark);
}
